<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Netty-Server</title>
    <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height: 800px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '网速监控'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(value) {
                //这里的value[0].value就是我需要每次显示在图上的数据
                if (value[0].value <= 0) {
                    value[0].value = '0B';
                } else {
                    var k = 1024;
                    var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                    //这里是取自然对数，也就是log（k）（value[0].value），求出以k为底的多少次方是value[0].value
                    var c = Math.floor(Math.log(value[0].value) / Math.log(k));
                    value[0].value = (value[0].value / Math.pow(k, c)).toPrecision(3) + ' ' + sizes[c];
                }
                //这里的value[0].name就是每次显示的name
                return value[0].name + "<br/>" + "流量为:" + value[0].value;
            }
        },
        legend: {
            data: ["上行网速"]
        },
        toolbox: {
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['line', 'bar']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100","101","102","103","104","105","106","107","108","109","110","111","112","113","114","115","116","117","118","119","120","121","122","123","124","125","126","127","128","129","130","131","132","133","134","135","136","137","138","139","140","141","142","143","144","145","146","147","148","149","150","151","152","153","154","155","156","157","158","159","160","161","162","163","164","165","166","167","168","169","170","171","172","173","174","175","176","177","178","179","180","181","182","183","184","185","186","187","188","189","190","191","192","193","194","195","196","197","198","199","200","201","202","203","204","205","206","207","208","209","210","211","212","213","214","215","216","217","218","219","220","221","222","223","224","225","226","227","228","229","230","231","232","233","234","235","236","237","238","239","240","241","242","243","244","245","246","247","248","249","250","251","252","253","254","255","256","257","258","259","260","261","262","263","264","265","266","267","268","269","270","271","272","273","274","275","276","277","278","279","280","281","282","283","284","285","286","287","288","289","290","291","292","293","294","295","296","297","298","299","300","301","302","303","304","305","306","307","308","309","310","311","312","313","314","315","316","317","318","319","320","321","322","323","324","325","326","327","328","329","330","331","332","333","334","335","336","337","338","339","340","341","342","343","344","345","346","347","348","349","350","351","352","353","354","355","356","357","358","359","360","361","362","363","364","365","366","367","368","369","370","371","372","373","374","375","376","377","378","379","380","381","382","383","384","385","386","387","388","389","390","391","392","393","394","395","396","397","398","399","400","401","402","403","404","405","406","407","408","409","410","411","412","413","414","415","416","417","418","419","420","421","422","423","424","425","426","427","428","429","430","431","432","433","434","435","436","437","438","439","440","441","442","443","444","445","446","447","448","449","450","451","452","453","454","455","456","457","458","459","460","461","462","463","464","465","466","467","468","469","470","471","472","473","474","475","476","477","478","479","480","481","482","483","484","485","486","487","488","489","490","491","492","493","494","495","496","497","498","499","500","501","502","503","504","505","506","507","508","509","510","511","512","513","514","515","516","517","518","519","520","521","522","523","524","525","526","527","528","529","530","531","532","533","534","535","536","537","538","539","540","541","542","543","544","545","546","547","548","549","550","551","552","553","554","555","556","557","558","559","560","561","562","563","564","565","566","567","568","569","570","571","572","573","574","575","576","577","578","579","580","581","582","583","584","585","586","587","588","589","590","591","592","593","594","595","596","597","598","599","600"]
        },
        yAxis: {
            type: "value",
            max: function(value) {
                var k = 1024;
                var c = Math.floor(Math.log(value.max) / Math.log(k));
                interval = Math.pow(k, c);
                return Math.ceil(value.max / interval) * interval;
            },
            interval:1024*1024,
            axisLabel: {
                formatter: function(value, index) {
                    if (value <= 0) {
                        value = '0B';
                    } else {
                        var k = 1024;
                        var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                        //这里是取自然对数，也就是log（k）（value），求出以k为底的多少次方是value
                        var c = Math.floor(Math.log(value) / Math.log(k));
                        value = (value / Math.pow(k, c)).toPrecision(3) + ' ' + sizes[c];
                    }
                    //这里的value[0].name就是每次显示的name
                    return value;
                }
            },
        },
        series: [{
            "data": [0.0,344481.0,9702.0,0.0,0.0,3974.0,32789.0,8862.0,0.0,18419.0,0.0,0.0,5545.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,3024.0,10550.0,0.0,0.0,0.0,0.0,7688.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,21584.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,1089.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0],
            "markLine": {
                "data": [{
                    "type": "average",
                    "name": "平均值"
                }],
                "label": {
                    formatter: function(value) {
                        if (value.value <= 0) {
                            value.value = '0B';
                        } else {
                            var k = 1024;
                            var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                            //这里是取自然对数，也就是log（k）（value），求出以k为底的多少次方是value
                            var c = Math.floor(Math.log(value.value) / Math.log(k));
                            value = (value.value / Math.pow(k, c)).toPrecision(4) + ' ' + sizes[c];
                        }
                        //这里的value[0].name就是每次显示的name
                        return value;
                    }
                }
            },
            "markPoint": {
                "data": [{
                    "type": "max",
                    "name": "最大值"
                }],
                symbol:"roundRect",
                symbolSize:[70,30],            "label": {
                    formatter: function(value) {
                        if (value.value <= 0) {
                            value.value = '0B';
                        } else {
                            var k = 1024;
                            var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                            //这里是取自然对数，也就是log（k）（value），求出以k为底的多少次方是value
                            var c = Math.floor(Math.log(value.value) / Math.log(k));
                            value = (value.value / Math.pow(k, c)).toPrecision(3) + ' ' + sizes[c];
                        }
                        //这里的value[0].name就是每次显示的name
                        return value;
                    }
                }
            },
            "name": "上行网速",
            "smooth": false,
            "type": "line"
        }],
        animationDuration: 10
    };    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>